<template>
  <el-dialog
    :model-value="dialogVisible"
    :before-close="handleClose"
    width="35%"
  >
    <template #header>
      <p class="font-bold text-lg">基于区块链技术构建茶叶溯源平台</p>
    </template>
    <el-card shadow="always">
      <el-row>
        <el-col>
          <p class="font-bold text-base">二维码获取详情</p>
          <br />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" style="padding-top: 20px">
          <p>产品名称：{{symListTable.cpmc}}</p>
          <br />
          <p>生产日期：{{symListTable.date}}</p>
          <br />
          <p>企业电话：{{symListTable.fzrtel}}</p>
          <br />
          <p>溯源码：{{ symListTable.sym }}</p>
        </el-col>
        <el-col :span="12">
          <el-image :src="qrImage" />
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>
</template>

<script setup>
import { defineEmits, ref } from "vue";

const props = defineProps(["qrImage", "symListTable", "dialogVisible"]);
const emits = defineEmits(["update:modelValue"]);

const handleClose = () => {
  emits("update:modelValue", false);
};
</script>

<style scoped>
</style>

